<template>
  <z-paging ref="paging" safe-area-inset-bottom auto-show-system-loading v-model="dataList" @query="queryList">
    <view slot="top">
      <navbar title="我的收藏"/>
      <view class="head flex row-between col-center">
        <view>共 <text class="red">{{total}}</text> 件</view>
        <view  v-if="dataList.length" @click="showHandler =!showHandler">{{ showHandler ? '取消': '管理' }}</view>
      </view>
    </view>
    <view class="list" :class="{'show': showHandler}">
      <view class="item" v-for="(item,index) in dataList" :key="index" @click="toDetail(item)">
        <view class="check" @click.stop="changeItemCheck(item)">
          <text :class="['iconfont', item.checked ? 'icon-checked' : 'icon-check']"/>
        </view>
        <view class="info">
          <c-image :src="item.imageUrl" loadingIcon="icon" mode="aspectFill"/>
          <view class="name">{{ item.name }}</view>
        </view>
      </view>
    </view>
    <view class="footer" slot="bottom">
      <template v-if="showHandler">
        <view class="footer-place"/>
        <view class="footer-fixed">
          <view class="footer-content">
            <view class="check" @click="changeCheckAll">
              <text :class="['iconfont', checkAll ? 'icon-checked' : 'icon-check']"/>
              全选
            </view>
            <view class="right">
              <view class="btn" @click="remove">删除</view>
            </view>
          </view>
          <u-safe-bottom/>
        </view>
      </template>
    </view>
    <c-modal v-model="showRemove" @confirm="handleRemove">确认取消收藏吗？</c-modal>
  </z-paging>
</template>

<script>
import {getCollectList, removeCollectBatch} from "@/api/my";

export default {
  data() {
    return {
      dataList: [], // 列表数据
      showHandler: false, // 是否显示操作按钮
      checkAll: false, // 全选按钮
      showRemove: false, // 是否显示移除确认弹窗
      total: 0,
    };
  },
  computed: {
    checkIds() {
      let ids = this.dataList.filter(item => item.checked).map(item => item.id);
      return ids;
    }
  },
  methods: {
    queryList(pageNo, pageSize) {
      getCollectList({
        pageNum: pageNo,
        pageSize
      }).then(res => {
        this.$refs.paging.complete((res.records || []).map(item => {
          item.checked = false;
          return item;
        }))
        this.total = res.total
      }).catch(e => {
        this.$refs.paging.complete([]);
      })
    },
    resetQuery() {
      this.$refs.paging.reload()
    },
    changeItemCheck(item) {
      item.checked = !item.checked;
      this.checkAll = this.dataList.every(item => item.checked);
    },
    changeCheckAll() {
      this.checkAll = !this.checkAll;
      this.dataList.forEach(item => {
        item.checked = this.checkAll;
      })
    },
    remove() {
      if (!this.checkIds.length) return
      this.showRemove = true;
    },
    handleRemove() {
      this.showRemove = false;
      removeCollectBatch({ids: this.checkIds.join(',')}).then(res => {
        this.$toast('删除成功');
        this.resetQuery()
      })
    },
    toDetail(item) {
      uni.navigateTo({
        url: `/pages/goods/detail?id=${item.businessId}`
      });
    }
  },
  onLoad(options) {
  }
}
</script>

<style lang="scss">
@import "@/static/styles/minix.scss";
page {
  background: #fff;
}
.head {
  padding: 10rpx 30rpx 20rpx 30rpx;
}
.list {
  padding: 0 20rpx;
  .item {
    position: relative;
    display: flex;
    align-items: center;
    transition: all .3s ease;
    margin-left: -64rpx;
    margin-bottom: 24rpx;
    .check {
      width: 64rpx;
      font-size: 40rpx;
      color: $-color-gray;
      .icon-checked {
        color: #e0b883;
      }
    }
    .info {
      height: 250rpx;
      border-radius: 16rpx;
      overflow: hidden;
      position: relative;
      margin-top: 20rpx;
      flex: 1;
      .name {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        font-size: 28rpx;
        background: rgba(0,0,0,.5);
        color: #fff;
        padding: 16rpx 20rpx;
      }
    }
  }
  &.show {
    .item {
      margin-left: 0;
    }
  }

}
.footer-place {
  height: 90rpx;
}
.footer-fixed {
  position: fixed;
  width: 100%;
  background: #ffff;
  bottom: 0;
  z-index: 999;
  border-top: 1rpx solid #f4f4f4;
  .footer-content {
    height: 90rpx;
    @include flex-between;
    .check {
      margin: 0 30rpx;
      color: $-color-gray;
      @include flex-center;
      .iconfont {
        font-size: 40rpx;
        margin-right: 10rpx;
      }
      .icon-checked {
        color: #e0b883;
      }
    }
    .right {
      display: flex;
      flex: 1;
      height: 100%;
      text-align: center;
      font-size: 32rpx;
      line-height: 90rpx;
      color: #fff;
      .btn {
        flex: 1;
        &:first-child {
          background: #000;
        }
        &:last-child {
          background: linear-gradient(to right, #f2e0b9, #e0b883);
        }
      }
    }
  }
}
</style>
